<template>
  <div class="home">
    <div class="title">
      <p>总体学习情况</p>
    </div>
    <div class="homebox">
      <div class="homelist">
        <p>{{ progress.curriculumNum }} <span>个</span></p>
        <span>培训课程</span>
      </div>
      <div class="homelist">
        <p>{{ progress.weekStudyNum }} <span>个</span></p>
        <span>每周一学</span>
      </div>
      <div class="homelist">
        <p>{{ progress.shiftNum }} <span>个</span></p>
        <span>学习班次</span>
      </div>
      <div class="homelist">
        <p>{{ progress.studyPersonTime }} <span>个</span></p>
        <span>学习人次</span>
      </div>
      <div class="homelist">
        <p>{{ progress.studyDuration }} <span>个</span></p>
        <span>累计学习时长</span>
      </div>
      <div class="homelist">
        <p>{{ progress.examPersonNum }} <span>时</span></p>
        <span>累计学习考试人数</span>
      </div>
    </div>

    <!-- 培训情况 -->
    <div class="study">
      <p class="traintitle">
        培训情况
        <el-date-picker
          v-model="value"
          type="month"
          placeholder="选择月"
          @change="getMonth"
          value-format="yyyy-MM"
        >
        </el-date-picker>
      </p>

      <div class="studybox">
        <div class="studylist">
          <p>{{ trainSituation.trainPlanNum }}</p>
          <p class="ptwo">培训计划课程数</p>
        </div>
        <div class="studylist">
          <p>{{ trainSituation.trainPlanPersonNum }}</p>
          <p class="ptwo">培训计划人数</p>
        </div>
        <div class="studylist">
          <p>{{ trainSituation.trainPersonNum }}</p>
          <p class="ptwo">实际培训人数</p>
        </div>
        <div class="studylist">
          <p>{{ trainSituation.studyDuration }}</p>
          <p class="ptwo">累计培训时长</p>
        </div>
        <div class="studylist">
          <p>{{ trainSituation.trainCompletionRate }}</p>
          <p class="ptwo">培训完成率</p>
        </div>
      </div>
    </div>
    <!-- 统计 -->
    <div class="statistics">
      <div class="ranking">
        <div class="top">
          <p>排行榜</p>
          <el-radio-group
            v-model="tabPosition"
            style="margin-bottom: 30px"
            @change="toggleTab"
          >
            <el-radio-button label="2">即将到期</el-radio-button>
            <el-radio-button label="1">已过期</el-radio-button>
          </el-radio-group>
        </div>
        <el-table :data="tableData" style="width: 100%" height="250">
          <el-table-column prop="certName" label="证书名称" width="160">
          </el-table-column>
          <el-table-column
            prop="personnel"
            label="姓名"
            width="80"
          ></el-table-column>
          <el-table-column prop="endTime" label="到期日"> </el-table-column>
        </el-table>
      </div>
      <div class="ranking">
        <div class="top">
          <p class="title">资源统计</p>
        </div>
        <div class="echartsbox">
          <linegraph
            :id="'barGraph'"
            :data="option2"
            style="height: 300px"
          ></linegraph>
        </div>
      </div>
      <div class="ranking linegraph">
        <div class="top">
          <p class="title">产业结构</p>
          <!-- <span>更多</span> -->
        </div>
        <div class="echartsbox">
          <linegraph
            :id="'linegraph'"
            :data="option"
            style="height: 300px"
          ></linegraph>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getLearn,
  getTrain,
  getCertificate,
  getHomeDataResource,
} from "@/api/home";
import Linegraph from "../components/linegraph.vue";
export default {
  name: "Home",
  components: { Linegraph },
  data() {
    return {
      value: "",
      tabPosition: 2,
      notAccess: false,
      ChartLineGraph2: null,
      progress: [], // 总体学习情况
      trainSituation: [], // 培训情况
      queryParams: {
        dateRange: undefined,
        theType: 2,
        alertDays: 6,
        pagesize: 10,
      },
      // 环形
      option: {
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {},
        },
        series: [
          {
            type: "pie",
            radius: [20, 80],
            center: ["50%", "50%"],
            roseType: "area",

            data: [
              { value: 36, name: "rose 1" },
              { value: 38, name: "rose 2" },
              { value: 32, name: "rose 3" },
              { value: 30, name: "rose 4" },
              { value: 28, name: "rose 5" },
              { value: 30, name: "rose 6" },
            ],
          },
        ],
      },
      // 柱状
      option2: {
        title: {},
        xAxis: {
          type: "category",
          data: [],
          axisLabel: {
            interval: 0,
            rotate: 45, //代表逆时针旋转45度
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "",
            data: [],
            type: "bar",
            barWidth: 30,
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#83bff6",
                  },
                  { offset: 0.5, color: "#188df0" },
                  {
                    offset: 1,
                    color: "#188df0",
                  },
                ],
              },
              // normal: {
              //   label: {
              //     show: true, //开启显示
              //     position: "top", //在上方显示
              //     textStyle: {
              //       //数值样式
              //       color: "black",
              //       fontSize: 10,
              //     },
              //   },
              // },
            },
            emphasis: {
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: "#2378f7" },
                    { offset: 0.7, color: "#2378f7" },
                    { offset: 1, color: "#83bff6" },
                  ],
                },
              },
            },
          },
        ],
      },

      tableData: [],
    };
  },
  methods: {
    getLearn() {
      getLearn().then((response) => {
        this.progress = response.result;
      });
    },
    getTrain() {
      getTrain(this.queryParams).then((response) => {
        this.trainSituation = response.result;
      });
    },
    getMonth() {
      console.log(this.value);
      this.queryParams.dateRange = this.value;
      this.getTrain();
    },
    toggleTab() {
      this.queryParams.theType = parseInt(this.tabPosition);
      this.getCertificate();
    },
    getCertificate() {
      getCertificate(this.queryParams).then((response) => {
        this.tableData = response.result.rows;
      });
    },
    // 资源统计
    getHomeData() {
      getHomeDataResource().then((response) => {
        this.option2.xAxis.data = response.result.theType;
        this.option2.series[0].data = response.result.typeVal;
      });
    },
  },
  created() {
    this.getLearn();
    this.getTrain();
    this.getCertificate();
    this.getHomeData();
  },
};
</script>
<style scoped lang="scss">
.el-date-editor.el-input {
  font-size: 13px;
  width: 110px;
}
/deep/ .el-input--suffix .el-input__inner {
  padding-right: 0;
}
/deep/ .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  margin-left: 10px;
}
/deep/ .el-input__inner {
  height: 28px;
  line-height: 28px;
}
/deep/ .el-input__icon {
  line-height: 28px;
}

.home {
  background: #f1f1f1;
  width: auto;
  height: auto;
  box-sizing: border-box;
}
.title {
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-radio-group {
  margin-bottom: 0 !important;
}
/deep/ .el-radio-button__inner {
  font-size: 13px;
  padding: 6px 10px;
}
.homebox {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  .homelist {
    width: 16%;
    background: #fff;
    display: flex;
    border-radius: 5px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.6rem 0;
    color: #fff;
    background: url("../assets/img/bg1.png");
    background-size: 100% 100%;

    p {
      font-size: 24px;
      margin-bottom: 10px;
      span {
        font-size: 14px;
      }
    }
  }
  .homelist:nth-child(2) {
    background: url("../assets/img/bg2.png");
    background-size: 100% 100%;
  }
  .homelist:nth-child(3) {
    background: url("../assets/img/bg3.png");
    background-size: 100% 100%;
  }
  .homelist:nth-child(4) {
    background: url("../assets/img/bg4.png");
    background-size: 100% 100%;
  }
  .homelist:nth-child(5) {
    background: url("../assets/img/bg5.png");
    background-size: 100% 100%;
  }
  .homelist:nth-child(6) {
    background: url("../assets/img/bg6.png");
    background-size: 100% 100%;
  }
}

// 培训情况
.study {
  background: #fff;
  margin-top: 14px;
  padding: 20px 0;
  .traintitle {
    margin-left: 10px;
  }
  .studybox {
    margin-top: 10px;
    display: flex;
    font-size: 24px;
    .studylist {
      width: 20%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-right: 1px solid #d6d2c1;
      p:last-child {
        margin-top: 10px;
        font-size: 14px;
      }
    }
  }
}
// 统计
.statistics {
  margin: 20px 0 0 0;
  display: flex;
  justify-content: space-between;
  .ranking {
    width: 28%;
    background: #fff;
    padding: 10px 10px 0 10px;
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 27px;
      font-weight: 600;
      .title {
        color: #0376f5;
        height: 100%;
        padding-left: 10px;
        position: relative;
      }
      .title::before {
        content: "";
        width: 3px;
        height: 70%;
        position: absolute;
        left: 0;
        background: #0376f5;
      }
    }
    /deep/ .el-table .cell {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .ranking:nth-child(2) {
    width: 36%;
  }
}
/deep/ .el-table__body {
  font-size: 13px;
  // width: 419px !important;
  width: 100% !important;
}
/deep/ .el-table {
  margin-top: 10px;
}
/deep/ .el-table .cell {
  padding-left: 10px;
}
.echartsbox {
  width: 100%;
  // margin-top: 10px;
  // border-top: 1px solid #ebebeb;
}
/deep/ .linegraph canvas {
  top: -24px !important;
}
/deep/ .el-table__cell {
  border-bottom: 1px solid #dcdfe6 !important;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 3px;
  height: 6px;
}

/*定义滚动条轨道 内阴影+圆角*/
/deep/.el-table__body-wrapper::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.1);
}

/*定义滑块 内阴影+圆角*/
/deep/.el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.1);
}
</style>
